<template>
  <div id="app">
    <h1>工程表列表</h1>
    <vxe-toolbar>
      <template v-slot:buttons>
        <el-button   size="mini" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
        <el-upload
          class="inline-block1"
          :action="importUrl"
          name="filename"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <el-button size="mini" class="margin-change1" icon="el-icon-upload2" >导入</el-button>
        </el-upload>
        <!-- <el-button  icon="el-icon-plus" @click="handleVisualizationAdd()">可视化新增工程</el-button>  -->
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
      row-id="id"
      height="480"
      size="medium"
      :loading="loading"
      ref="xTable1"
    >
      <vxe-table-column
        field="ID"
        type="checkbox"
        width="60"
      ></vxe-table-column>
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="PROJECT_NAME"
        title="工程名称"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="REMARK"
        title="备注"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="CREATE_DATE"
        title="创建日期"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="ENCODE"
        title="字符集"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="IS_DATASOURCE"
        title="是否选数据源"
        width="100" :formatter="formatterDataSource"
      ></vxe-table-column>
      <vxe-table-column title="操作" width="250" show-overflow>
        <template v-slot="{ row }">
          <i  class="el-icon-setting"  @click="parameterConfig(row)" ></i>
          <i  class="el-icon-document-copy"  @click="handleTemplate(row)"></i>
          <i style="margin-left: 5px;" class="el-icon-edit"  @click="handleEdit(row)" ></i>
          <i style="margin-left: 5px;" class="el-icon-video-play" @click="handleRun(row)"></i>
          <i style="margin-left: 5px;" class="el-icon-download" @click="handleExport(row)"></i>
          <i style="margin-left: 5px;" class="el-icon-delete" v-if="row.CREATE_USER_ID===userId" @click="handleDelete(row)"></i>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      border
      size="medium"
      :loading="loading"
      :current-page="tablePage.pageNo"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total'
      ]"
      @page-change="handlePageChange"
    >
    </vxe-pager>
  </div>
</template>

<script>
import request from "../utils/request";
import {baseUrl, wsBaseUrl} from "../utils/env";
export default {
  name: "project",
  methods: {
    handleAvatarSuccess(res, file) {
      console.log('res:'+res);
      this.loadTableData();
    },
    beforeAvatarUpload(file) {
      console.log('file.type:'+file.type);
      const isZip = file.type === 'application/x-zip-compressed';

      if (!isZip) {
        this.$message.error('上传头像图片只能是 ZIP 格式!');
      }
      return isZip ;
    },
    formatterDataSource({cellValue}){
      return cellValue ? (cellValue === '0' ? '否' : '是') : ''
    },
    //调整到工程参数配置列表
    parameterConfig(row){
      debugger;
      //设置允许修改标志
      this.setAllowProjectModifyFlag(row);
      this.$router.push({ path: "/projectparameter/list/"+row.ID });
    },
    //分享工程
    shareProject(row){
      this.$router.push({ path: "/shareproject/list/"+row.ID });
    },
    handleTemplate(row){
      //设置允许修改标志
      this.setAllowProjectModifyFlag(row);
      this.$router.push({ path: "/template/list/"+row.ID+"/"+row.PROJECT_NAME });
    },
    handleAdd() {
      this.$router.push({ path: "/project/add" });
    },
    handleVisualizationAdd(){
      this.$router.push({path:"/kformdesign"});
    },
    //localStorage.userId
    setAllowProjectModifyFlag(row){
      if(row.CREATE_USER_ID===this.userId){
        localStorage.allowProjectModify = '1';
      }else{
        localStorage.allowProjectModify = '0';
      }
    },
    //装入表格数据
    loadTableData() {
      //var userId = localStorage.userId;
      const that = this;
      request({
        method: "POST",
        url: `/api/Project/listPage?pageNo=${that.tablePage.pageNo}&pageSize=${that.tablePage.pageSize}`,
      })
        .then(res => {
          if (res.data.status == "1") {
            that.tableData = res.data.list;
            that.tablePage.totalResult = res.data.count;
            this.$message(res.data.message);
          } else {
            this.$message(res.data.message);
            return false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleDelete(row) {
      console.log(row);
      const param = {
        id: row.ID
      };
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        request({
          method: "POST",
          url: "/api/Project/delete",
          data: param
        })
          .then(res => {
            if (res.data.status == "1") {
              this.loadTableData();
              this.$message(res.data.message);
            } else {
              this.$message(res.data.message);
              return false;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }).catch(err => {
          console.log(err);
        });

    },
    handleEdit(row) {
      // console.log(row);
      //设置允许修改标志
      this.setAllowProjectModifyFlag(row);
      this.$router.push({ path: "/project/edit/" + row.ID });
    },
    handleRun(row) {
      console.log(row);
      if (row.CUSTOM_RUN_URL) {
        this.$router.push({path: row.CUSTOM_RUN_URL+"/" + row.ID + "/" + row.IS_DATASOURCE});
      } else {
        this.$router.push({path: "/project/run/" + row.ID + "/" + row.IS_DATASOURCE});
      }

      },
    handleExport(row) {
      console.log(row);
      window.open(
        `${this.downloadUrl}?id=${row.ID}`
      )

    },

    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.pageNo = currentPage;
      this.tablePage.pageSize = pageSize;
      this.loadTableData();
    }
   },


  data() {
    return {
      allAlign: null,
      tableData: [],
      loading: false,
      tablePage: {
        pageNo: 1,
        pageSize: 10,
        totalResult: 0
      },
      userId:'',
      importUrl:baseUrl+"/api/Project/import",
      downloadUrl:baseUrl+'/api/Project/export'
    };
  },
  mounted() {
    this.userId = localStorage.userId;
    this.loadTableData();
  }
};
</script>

<style scoped>
.inline-block1 {
  display: inline-block;
  margin-right:10px;
}
.margin-change1{
  display: inline-block;
  margin-left:10px;
}
</style>

